<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>2022年度汇缴金额统计</title>

    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div th:replace="common :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                年度汇缴金额统计
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Charts</a>
                </li>
                <li class="active"> Chartjs </li>
            </ul>
        </div>
        <!-- page heading end-->

        <span style="padding-left: 10px">当前统计：</span>
        <select id="selectMethod" onchange="changeData()">
            <option value="money" th:selected="${method=='money'}">金额</option>
            <option value="company" th:selected="${method=='company'}">公司数</option>
            <option value="people" th:selected="${method=='people'}">职工数</option>
        </select>

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            全年总览图
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="totalMoney" style="width: 100%; height: 390px; text-align: center; margin: 0px auto; padding: 0px; position: relative;"></div>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            全年网站渠道统计图
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="totalMoney_retention" style="width: 100%; height: 390px; text-align: center; margin: 0px auto; padding: 0px; position: relative;"></div>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            每月汇缴总额
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="monthTotalShow" style="width: 100%; height: 450px; padding-top: 10px"></div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2022 &copy; 上海承大 年度数据可视化 </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!--common scripts for all pages-->
<div th:replace="common :: #commonscript"></div>



<!--echarts的数据-->
<script type="text/javascript" th:inline="javascript">
    //通过用户的选择来进行页面的跳转
    function changeData(){
        var selectMethod = document.getElementById('selectMethod');
        var method = selectMethod.options[selectMethod.selectedIndex].value;
        window.location.href = '/month_money_chart?'+'method='+method;
    }

    var monthVos  = [[${year.monthVos}]];
    var method = [[${method}]];
    var unit;//图表的单位
    //图表一的数据，六种渠道
    var weituokoukuan = new Array(12);
    var jianhangwangyin = new Array(12);
    var yinghangkazhuanzhang = new Array(12);
    var zhipiao = new Array(12);
    var weituoshoukuan = new Array(12);
    var daijipinzheng = new Array(12);
    //图表二的数据，总额
    var total = new Array(12);
    //图表三四五的数据，委托扣款的三种渠道
    var client = new Array(12);
    var company = new Array(12);
    var webpage = new Array(12);
    if (method=='money'){
        unit='亿元';
        for (var i = 0;i<12;i++){
            client[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.client/100000000).toFixed(2);
            company[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.company/100000000).toFixed(2);
            webpage[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.webpage/100000000).toFixed(2);
            weituokoukuan[i] = (monthVos[i].onlineChannelVo.retentionPayment/100000000).toFixed(2);
            jianhangwangyin[i] = (monthVos[i].onlineChannelVo.onlineBanking/100000000).toFixed(2);
            yinghangkazhuanzhang[i] = (monthVos[i].cabinetSideChannelVo.bankAccounting/100000000).toFixed(2);
            zhipiao[i] = (monthVos[i].cabinetSideChannelVo.check/100000000).toFixed(2);
            weituoshoukuan[i] = (monthVos[i].autoChannelVo.consignmentCollection/100000000).toFixed(2);
            daijipinzheng[i] = (monthVos[i].cabinetSideChannelVo.creditVoucher/100000000).toFixed(2);
            total[i] = (monthVos[i].onlineChannelVo.retentionPayment/100000000+monthVos[i].onlineChannelVo.onlineBanking/100000000+monthVos[i].cabinetSideChannelVo.bankAccounting/100000000+monthVos[i].cabinetSideChannelVo.check/100000000+monthVos[i].autoChannelVo.consignmentCollection/100000000+monthVos[i].cabinetSideChannelVo.creditVoucher/100000000).toFixed(2);
        }
    }else if (method=='company'){
        unit='万家';
        for (var i = 0;i<12;i++){
            client[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.clientUnit/10000).toFixed(2);
            company[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.companyUnit/10000).toFixed(2);
            webpage[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.webpageUnit/10000).toFixed(2);
            weituokoukuan[i] = (monthVos[i].onlineChannelVo.retentionPaymentUnit/10000).toFixed(2);
            jianhangwangyin[i] = (monthVos[i].onlineChannelVo.onlineBankingUnit/10000).toFixed(2);
            yinghangkazhuanzhang[i] = (monthVos[i].cabinetSideChannelVo.bankAccountingUnit/10000).toFixed(2);
            zhipiao[i] = (monthVos[i].cabinetSideChannelVo.checkUnit/10000).toFixed(2);
            weituoshoukuan[i] = (monthVos[i].autoChannelVo.consignmentCollectionUnit/10000).toFixed(2);
            daijipinzheng[i] = (monthVos[i].cabinetSideChannelVo.creditVoucherUnit/10000).toFixed(2);
            total[i] = (monthVos[i].onlineChannelVo.retentionPaymentUnit/10000+monthVos[i].onlineChannelVo.onlineBankingUnit/10000+monthVos[i].cabinetSideChannelVo.bankAccountingUnit/10000+monthVos[i].cabinetSideChannelVo.checkUnit/10000+monthVos[i].autoChannelVo.consignmentCollectionUnit/10000+monthVos[i].cabinetSideChannelVo.creditVoucherUnit/10000).toFixed(2)
        }
    }else {
        unit='万人';
        for (var i = 0;i<12;i++){
            client[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.clientPeople/10000).toFixed(2);
            company[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.companyPeople/10000).toFixed(2);
            webpage[i] = (monthVos[i].onlineChannelVo.retentionpaymentVo.webpagePeople/10000).toFixed(2);
            weituokoukuan[i] = (monthVos[i].onlineChannelVo.retentionPaymentPeople/10000).toFixed(2);
            jianhangwangyin[i] = (monthVos[i].onlineChannelVo.onlineBankingPeople/10000).toFixed(2);
            yinghangkazhuanzhang[i] = (monthVos[i].cabinetSideChannelVo.bankAccountingPeople/10000).toFixed(2);
            zhipiao[i] = (monthVos[i].cabinetSideChannelVo.checkPeople/10000).toFixed(2);
            weituoshoukuan[i] = (monthVos[i].autoChannelVo.consignmentCollectionPeople/10000).toFixed(2);
            daijipinzheng[i] = (monthVos[i].cabinetSideChannelVo.creditVoucherPeople/10000).toFixed(2);
            total[i] = (monthVos[i].onlineChannelVo.retentionPaymentPeople/10000+monthVos[i].onlineChannelVo.onlineBankingPeople/10000+monthVos[i].cabinetSideChannelVo.bankAccountingPeople/10000+monthVos[i].cabinetSideChannelVo.checkPeople/10000+monthVos[i].autoChannelVo.consignmentCollectionPeople/10000+monthVos[i].cabinetSideChannelVo.creditVoucherPeople/10000).toFixed(2)
        }
    }


    //图表一：全年总览
    var myChart = echarts.init(document.getElementById('totalMoney'));
    setTimeout(function () {
        option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    [
                        'product',
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ],
                    ['网站', weituokoukuan[0],weituokoukuan[1],weituokoukuan[2],weituokoukuan[3],weituokoukuan[4],weituokoukuan[5],weituokoukuan[6],weituokoukuan[7],weituokoukuan[8],weituokoukuan[9],weituokoukuan[10],weituokoukuan[11]],
                    ['建行网银', jianhangwangyin[0],jianhangwangyin[1],jianhangwangyin[2],jianhangwangyin[3],jianhangwangyin[4],jianhangwangyin[5],jianhangwangyin[6],jianhangwangyin[7],jianhangwangyin[8],jianhangwangyin[9],jianhangwangyin[10],jianhangwangyin[11]],
                    ['银行卡转账', yinghangkazhuanzhang[0],yinghangkazhuanzhang[1],yinghangkazhuanzhang[2],yinghangkazhuanzhang[3],yinghangkazhuanzhang[4],yinghangkazhuanzhang[5],yinghangkazhuanzhang[6],yinghangkazhuanzhang[7],yinghangkazhuanzhang[8],yinghangkazhuanzhang[9],yinghangkazhuanzhang[10],yinghangkazhuanzhang[11]],
                    ['支票', zhipiao[0],zhipiao[1],zhipiao[2],zhipiao[3],zhipiao[4],zhipiao[5],zhipiao[6],zhipiao[7],zhipiao[8],zhipiao[9],zhipiao[10],zhipiao[11]],
                    ['委托收款', weituoshoukuan[0],weituoshoukuan[1],weituoshoukuan[2],weituoshoukuan[3],weituoshoukuan[4],weituoshoukuan[5],weituoshoukuan[6],weituoshoukuan[7],weituoshoukuan[8],weituoshoukuan[9],weituoshoukuan[10],weituoshoukuan[11]],
                    ['贷记凭证', daijipinzheng[0],daijipinzheng[1],daijipinzheng[2],daijipinzheng[3],daijipinzheng[4],daijipinzheng[5],daijipinzheng[6],daijipinzheng[7],daijipinzheng[8],daijipinzheng[9],daijipinzheng[10],daijipinzheng[11]]
                ]
            },
            xAxis: { type: 'category' },
            yAxis: { name: unit,gridIndex: 0 },
            grid: { top: '55%' },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '1月',
                        tooltip: '1月'
                    }
                }
            ]
        };
        myChart.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        myChart.setOption(option);
    });

    //图表二：全年网站
    var myChart1 = echarts.init(document.getElementById('totalMoney_retention'));
    setTimeout(function () {
        option1 = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    [
                        'product',
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ],
                    ['客户端', client[0],client[1],client[2],client[3],client[4],client[5],client[6],client[7],client[8],client[9],client[10],client[11]],
                    ['人力资源公司', company[0],company[1],company[2],company[3],company[4],company[5],company[6],company[7],company[8],company[9],company[10],company[11]],
                    ['网页版', webpage[0],webpage[1],webpage[2],webpage[3],webpage[4],webpage[5],webpage[6],webpage[7],webpage[8],webpage[9],webpage[10],webpage[11]]
                ]
            },
            xAxis: { type: 'category' },
            yAxis: { name: unit,gridIndex: 0 },
            grid: { top: '55%' },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '1月',
                        tooltip: '1月'
                    }
                }
            ]
        };
        myChart1.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart1.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        myChart1.setOption(option1);
    });

    //图表三：全年每月汇缴金额总额
    let monthVos2  = [[${year.monthVos}]];
    var myChart2 = echarts.init(document.getElementById('monthTotalShow'));
    option2 = {
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top: '10%',
            right: '2%',
            left: '1%',
            bottom: '10%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            }
        ],
        yAxis : [
            {
                name: unit,
                type : 'value'
            }
        ],
        series : [
            {
                name:'月汇缴总额',
                type:'line',
                areaStyle: {normal: {}},
                data:[total[0],total[1],total[2],total[3],total[4],total[5],total[6],total[7],total[8],total[9],total[10],total[11]
                ],
                smooth: true
            }
        ]
    };
    myChart2.setOption(option2);

</script>

</body>
</html>
